<template>
	<view class="content ">
		<div class="pos-rel" v-if="loading">


			<!-- 内容 -->
			<view class="banner-section" v-if="serviceDetail.priceType !== 'tutor'">
				<swiper class="banner-swiper" circular :indicator-dots="false" autoplay :current="currentBanner"
					@change="onBannerChange">
					<swiper-item v-for="(item, index) in serviceDetail.carouselImageUrls.split(',')" :key="index">
						<view class="swiper-item-container">
							<view class="swiper-item-wrapper">
								<image :src="baseUrl + item" class="banner-image" mode="aspectFill">
								</image>

							</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- 自定义指示器 -->
				<view class="custom-indicator lh-40">
					{{ currentBanner + 1 }}/{{ serviceDetail.carouselImageUrls.split(',').length }}

				</view>
			</view>
			<div class="main mt-20">
				<div class="contentBox bg-fff bor-r8 p-30 mb-20" v-if="serviceDetail.priceType !== 'tutor'">
					<div class="fontS32 lh-50 font-500">{{ serviceDetail.serveName }}</div>
					<div class="flex mt-28">
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'fix'">
							<div class="color-red fontS24">¥</div>
							<div class="color-red fontS32 font-bold">{{
								serviceDetail.attributeDtos[0].presentPrice }}
							</div>
							<div class="fontS22 color-9 text-decoration-through ml-10"
								v-if="serviceDetail.priceType !== 'tutor'">¥{{
									serviceDetail.attributeDtos[0].price }}
							</div>
						</div>
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'periodic'">
							<div class="color-red fontS24">¥</div>
							<div class="color-red fontS32 font-bold">{{
								serviceDetail.attributeDtos[0].presentPrice }}
							</div>
							<div class="fontS22 color-9  ml-10"> 元/人/月
							</div>
						</div>
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'unfix'">
							<div class="color-red fontS32">??</div>
							<div class="fontS22 color-9  ml-10"> 咨询客服改价
							</div>
						</div>
					</div>

				</div>
				<div class="contentBox ">
					<image v-for="(item, index) in serviceDetail.introductionImageUrls.split(',')" :index="index"
						:src="baseUrl + item" mode="widthFix"></image>
				</div>
			</div>
			<div class="bottom">
				<div class="customBtn mt-4" @click="handleToChatRoom">
					<button>
						<div class="iconfont icon-kefu"></div>
						<div class="mt-5 fontS18">客服 </div>
					</button>
				</div>
				<div class="customBtn mt-4" @click="collectBtn">
					<button>
						<div class="iconfont icon-shoucang " :class="serviceDetail.isStoreUp ? 'color-yellowG' : ''">
						</div>
						<div class="mt-5 fontS18" :class="serviceDetail.isStoreUp ? 'color-yellowG' : ''">收藏 </div>
					</button>

				</div>
				<div class="bottomBtn fontS26" @click="goTutor" v-if="serviceDetail.priceType === 'tutor'">购买一对一辅导</div>
				<div class="bottomBtn fontS26" @click="buyBtn" v-else>购买服务</div>

			</div>
		</div>
		<!-- 购买弹框 -->
		<div class="buyCover" v-if="showBuyModal" @click="showBuyModal = false"></div>
		<div class="buyContent" v-if="showBuyModal">
			<div class="flex bg-fff pt-30" @click="showBuyModal = false">
				<div class="iconfont icon-close1 ml-auto fontS32 pl-30 pr-30"></div>
			</div>
			<div class="flex-center bg-fff pt-40 pb-40 pl-30 pr-30">
				<image :src="baseUrl + serviceDetail.carouselImageUrls" class="serveImg" mode="aspectFill">
				</image>
				<div class="ml-28">
					<div class="h-84 lh-42 fontS32 ">{{ serviceDetail.serveName }}</div>
					<div class="flex align-baseline mt-28">
						<!-- <div class="color-red fontS24">¥</div>
						<div class="color-red fontS32 font-bold">{{ serviceDetail.attributeDtos[0].presentPrice }}</div>
						<div class="fontS22 color-9 text-decoration-through ml-10"
							v-if="serviceDetail.priceType === 'fix'">¥{{
								serviceDetail.attributeDtos[0].price }}
						</div>
						<div class="fontS22 color-9  ml-10" v-if="serviceDetail.priceType === 'periodic'"> 元/人/月
						</div> -->
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'fix'">
							<div class="color-red fontS24">¥</div>
							<div class="color-red fontS32 font-bold">{{
								serviceDetail.attributeDtos[0].presentPrice }}
							</div>
							<div class="fontS22 color-9 text-decoration-through ml-10"
								v-if="serviceDetail.priceType !== 'tutor'">¥{{
									serviceDetail.attributeDtos[0].price }}
							</div>
						</div>
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'periodic'">
							<div class="color-red fontS24">¥</div>
							<div class="color-red fontS32 font-bold">{{
								serviceDetail.attributeDtos[0].presentPrice }}
							</div>
							<div class="fontS22 color-9  ml-10"> 元/人/月
							</div>
						</div>
						<div class="flex-center align-baseline" v-if="serviceDetail.priceType === 'unfix'">
							<div class="color-red fontS32">??</div>
							<div class="fontS22 color-9  ml-10"> 咨询客服改价
							</div>
						</div>

					</div>
				</div>

			</div>
			<div class="mt-30 ml-30 mr-30" v-if="serviceDetail.priceType === 'periodic'">
				<div class="fontS30 lh-40">支付周期</div>
				<div class="bor-r8 bg-fff flex-center lh-80 pl-20 pr-20 mt-20">
					<div>{{ serviceDetail.servePeriodUnit === 'month' ? '月' : '' }}</div>
					<div class="ml-auto iconfont icon-xuanzhong color-green"></div>
				</div>
			</div>
			<div class="m-30 flex-center">
				<div>数量</div>
				<div class="flex-center ml-auto">
					<div @click="reduceBtn" class="iconfont icon-jian pl-10 pr-10"></div>
					<input class="serveInput  bg-fff text-center" @input="inputNum" type="number" v-model="num">
					<div @click="addBtn" class="iconfont icon-jia pl-10 pr-10"></div>

				</div>
			</div>
			<div class=" p-30 bg-fff">
				<div class="submitBtn" @click="CreatOrder">
					立即购买
				</div>

			</div>
		</div>


		<div v-if="showPopup" @click="closePopups()" class="pageBox"></div>
		<bsLogin @close="closePopup()" :show="showPopup"></bsLogin>


	</view>
</template>

<script>
const App = getApp().globalData;

import {
	findServePersonalDetailApp,
	findServeDetailApp,
	serveAction
} from "@/api/serve";
import { getCustomerService } from '../../api/user';


export default {

	data() {
		return {
			showBuyModal: false,
			currentBanner: 0,
			headerHeight: 0, // 用于存储头部高度
			baseUrl: getApp().globalData.baseUrl,
			title: '人法财',
			isShowbar: false,
			isBack: false,
			serviceDetail: null,
			loading: false,

			swiperList: [],
			iconList: [],
			custom: null,
			navTop: null,
			num: 1,
			customerService: null,
		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onShareTimeline() {
		return {
			title: this.shareLine.title,
			// imageUrl: this.shareLine.imageUrl,
		}
	},
	mounted() {

		// 动态获取头部高度

	},
	onShareAppMessage(res) {

		console.log(res)

		if (res.from === 'button') {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.weeklyDetailInfo.coverUrl,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		} else {
			return {
				title: this.shareLine.title,
				path: '/pages/index/index',
				// imageUrl: this.houseListInfo.houseCover,
				success(res) {
					uni.showToast({
						title: '分享成功'
					})
				},
				fail(res) {
					uni.showToast({
						title: '分享失败',
						icon: 'none'
					})
				}
			}
		}
	},


	async onLoad(option) {
		await this.getServiceDetail(option.serveId)
	},

	methods: {
		onBannerChange(e) {
			this.currentBanner = e.detail.current;
		},
		// 详情
		async getServiceDetail(id) {
			let apiUrl = this.userInfo.userType === '03' ? findServeDetailApp : findServePersonalDetailApp
			const {
				data
			} = await apiUrl(id);
			this.serviceDetail = data;
			if (this.userInfo.userId) {
				const res = await getCustomerService({ serveId: id })
				console.log('serviceDetail ===>', data, res);
				this.customerService = res?.data;
			}

			this.loading = true
		},
		// 收藏
		async collectBtn() {

			const {
				data
			} = await serveAction({
				"serveId": this.serviceDetail.serveId,
				"type": 4,
				"userType": this.userInfo.userType
			});
			await this.getServiceDetail(this.serviceDetail.serveId)

		},
		// 数量加减
		reduceBtn() {
			if (this.num > 1) {
				this.num--;
			}
		},
		inputNum(e) {
			console.log(e)
			if (e.detail.value < 1) {
				this.num = 1
			}
		},
		addBtn() {
			this.num++;
		},
		// 跳转导师
		goTutor() {
			if (this.userInfo.userType === '03' && !this.userInfo.companyId) {
				uni.showModal({
					title: '提示',
					content: '你还未认证企业是否去认证？',
					confirmColor: '#37AF71',
					success: async function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/auth/companyAuth'
							})
						}
					}
				});
			} else {
				uni.navigateTo({
					url: `/pages/service/tutor?serveId=${this.serviceDetail.serveId}`
				})
			}

		},
		buyBtn() {
			if (this.userInfo.userType) {
				this.showBuyModal = true
			} else {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}


		},
		// 跳转支付
		CreatOrder() {
			if (this.userInfo.userType === '03' && !this.userInfo.companyId) {
				uni.showModal({
					title: '提示',
					content: '你还未认证企业是否去认证？',
					confirmColor: '#37AF71',
					success: async function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/auth/companyAuth'
							})
						}
					}
				});
			} else {
				uni.navigateTo({
					url: `/pages/order/create?serveId=${this.serviceDetail.serveId}&num=${this.num}`

				})

			}


		},
		handleToChatRoom() {
			if (this.userInfo.userType) {
				console.log('customerService ===>', this.customerService);
				const { userId, nickName } = this.customerService;
				const serveId = this.serviceDetail.serveId;
				if (userId) {
					uni.navigateTo({
						url: `/pages/chatroom/chatroom?toUserId=${userId}&nick=${nickName}&serveId=${serveId}`
					});
				}
			} else {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}

		}
	},

	onReachBottom() {
	},
	onPullDownRefresh() {
	},
};
</script>

<style lang="less" scoped>
@import url(index.less);

page {
	background-color: #f7f7f7 !important;
}

.content {

	padding-bottom: calc(constant(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 108upx);
	/*兼容 IOS>11.2*/

}
</style>
